<template>
	<div class="swiper-list">
		<swiper class="swiper" :options="swiperOption" ref="mySwiper">
			<!-- //这里插入图片 -->
			<swiper-slide v-for="(item,index) in list" :key='index'>
				<img :src="item.imgUrl" alt="">
			</swiper-slide>
		</swiper>
		<!-- //这是选择器 -->
		<div class="swiper-pagination" style="left: 50%;"></div>
		
	</div>
</template>

<script>
	export default {
		props: {
			list: Array,
		},
		data() {
			return {
				swiperOption: { //swiper3
					autoplay: 3000,
					speed: 1000,
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					}, //选择器配置

				}
			}
		}
	}
</script>

<style scoped >
	.swiper-list{
		position: relative;
	}
	.swiper img{
		width: 100%;
		height: 4.32rem;
	}
	.swiper-pagination{
		width: 100%;
		bottom: 0.266666rem;
		text-align: left;
	}
	::v-deep .swiper-pagination-bullet-active{
		background: #fff;
	}
	::v-deep .swiper-pagination-bullet{
		margin: 0 0.08rem;
		background: red;
	}
</style>
